/**
 *
 * Copyright 2016-present reading
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 */
import React from 'react';
import PropTypes from 'prop-types';
import { StyleSheet, ViewPropTypes, Text, TouchableOpacity, View, SectionList, Image} from 'react-native';

const propTypes = {
  sections: PropTypes.array,
  renderItem: PropTypes.object,
  containerStyle: ViewPropTypes.style
};
const TeamCard = ({
  sections,
  renderItem,
  containerStyle
}) => (
  <View style={[
    styles.containerStyle,
    containerStyle && containerStyle
  ]}>
    <SectionList
      style={styles.sectionStyle}
      stickySectionHeadersEnabled={true}
      renderItem={
        ({item}) => 
          <View style={styles.itemStyle}>
            <Image
            resizeMode='cover'
            style={styles.itemImageStyle}
            source={{ uri: item.image }}
            />
            <Text style={styles.itemTitleStyle}>{item.title}</Text>
          </View>
        }
      renderSectionHeader={
        ({section}) => 
          <View style={styles.sectionHeader}>
            <Text>{section.title}</Text>
          </View>
        }
      sections={sections}
    />
  </View>
);

TeamCard.propTypes = propTypes;



const styles = StyleSheet.create({
  containerStyle: {
    flex: 1
  },
  sectionStyle: {
    backgroundColor: 'white'
  },
  sectionHeader: {
    paddingTop: 10,
    backgroundColor: 'white'
  },
  itemStyle: {
    flexDirection: 'row',
    paddingTop: 5,
    paddingBottom: 5,
    alignItems: 'center'
  },
  itemImageStyle: {
    width: 20,
    height: 20,
    borderRadius: 10
  },
  itemTitleStyle:{
    marginLeft: 10
  }
});

export default TeamCard;
